<template>
  <div class="orz">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分组管理</span>
        <el-button icon="el-icon-plus" type="primary" @click="openAdd"
          >添加分组</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="meterTitleList"
        style="width: 100%; margin-bottom: 20px;height: 100%;overflow: auto;"
        default-expand-all
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column prop="groupName" label="区域"> </el-table-column>
        <!-- <el-table-column prop="orzOrder" label="序号" sortable width="100">
        </el-table-column> -->
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="openAddOne(scope.row)"
              >添加</el-button
            > -->
            <el-button :disabled="scope.row.disabled" type="text" size="small" @click="openContact(scope.row)"
              >移入设备</el-button
            >
            <el-button :disabled="scope.row.disabled" type="text" size="small" @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <el-button :disabled="scope.row.disabled" type="text" size="small" @click="delFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加区域 -->
    <div class="addDialog">
      <el-dialog
        title="添加分组"
        :visible.sync="addDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="addForm" class="demo-ruleForm">
          <el-form-item label="分组名称" required>
            <el-input
              v-model="addForm.groupName"
              clearable
              placeholder="请输入分组名称"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="显示排序" required>
            <el-input
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              v-model="addForm.orzOrder"
              clearable
              placeholder="请输入显示排序"
            ></el-input>
          </el-form-item> -->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogShow = false">取 消</el-button>
          <el-button type="primary" @click="addFn">确 认</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 编辑区域 -->
    <div class="editDialog">
      <el-dialog
        title="编辑分组"
        :visible.sync="editDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="editForm" class="demo-ruleForm">
          <el-form-item label="区域名称" required>
            <el-input
              v-model="editForm.groupName"
              clearable
              placeholder="请输入区域名称"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="editFn"
            :disabled="editForm.groupName? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 添加子区域 -->
    <!-- <div class="addOneDialog">
      <el-dialog
        title="添加区域"
        :visible.sync="addOneDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="addOneForm" class="demo-ruleForm">
          <el-form-item label="区域名称" required>
            <el-input
              v-model="addOneForm.orzName"
              clearable
              placeholder="请输入区域名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="显示排序" required>
            <el-input
              min="1"
              max="25"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              v-model="addOneForm.orzOrder"
              clearable
              placeholder="请输入显示排序"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addOneDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addOneFn"
            :disabled="addOneForm.orzName && addOneForm.orzOrder ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div> -->
    <!-- 关联区域设备 -->
    <div class="contactDialog">
      <el-dialog
        title="选择设备"
        :visible.sync="contactDialogShow"
        width="50%"
        :destroy-on-close="true"
      >
        <span>已选择{{ num }}</span>
        <el-table
          v-loading="loading1"
          height="300"
          ref="isExpand"
          :data="contactData"
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="meterId" label="设备id"> </el-table-column>
          <el-table-column prop="meterName" label="设备名称"> </el-table-column>
          <el-table-column prop="meterNumber" label="表号">
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="contactData.length !== 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 30, 50, 70, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button @click="contactDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="contactFn"
            :disabled="num !== 0 ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getOrzApi,
  addOrzApi,
  getOneOrzApi,
  editOneOrzApi,
  delOneOrzApi,
  getOrzMeterApi,
  contactOrzMeterApi,
  getGroupApi,
  addGroupApi,
  delGroupApi,
  getCanGroupApi,
  getOneGroupApi,
  editGroupApi
} from "../../api/group";
export default {
  data() {
    return {
      total: null,
      contactData: [],
      loading1: false,
      loading: false,
      tableData: [],
      // 分组数据
      meterTitleList: [
        {
          groupId: "",
          groupName: "全部",
          disabled:true
        },
        {
          groupId: 1,
          groupName: "电表",
          disabled:true
        },
        {
          groupId: 2,
          groupName: "水表",
          disabled:true
        }
      ],
      addDialogShow: false,
      contactDialogShow: false,
      addOneDialogShow: false,
      editDialogShow: false,
      addForm: {
        // orzName: "",
        groupName: "",
        meterIds: []
        // orzOrder: "",
        // orzParentId: 0,
      },
      addOneForm: {
        orzName: "",
        orzOrder: "",
        orzParentId: 0
      },
      editForm: {
        groupName:'',
        meterIds: []
      },
      editId: null,// 编辑id
      pageNum: 1,
      pageSize: 10,
      num: 0
    };
  },
  mounted() {
    this.getGroup();
  },
  methods: {
    // 获取分组列表
    getGroup() {
      this.loading = true;
      let that = this;
      that.meterTitleList = [
        // {
        //   groupId: "",
        //   groupName: "全部",
        //   disabled:true
        // },
        // {
        //   groupId: 1,
        //   groupName: "电表",
        //   disabled:true
        // },
        // {
        //   groupId: 2,
        //   groupName: "水表",
        //   disabled:true
        // }
      ];
      getGroupApi().then(res => {
        if (res.code == 200) {
          if (res.data.length !== 0) {
            that.meterTitleList.push(...res.data);
            console.log("6", that.meterTitleList);
          }
          this.loading = false;
        }
      });
    },
    // 获取区域列表
    // getOrz() {
    //   this.loading = true;
    //   getOrzApi().then((res) => {
    //     if (res.code == 200) {
    //       this.loading = false;
    //       this.tableData = res.data;
    //     }
    //   });
    // },
    // 打开添加区域弹框
    openAdd() {
      this.addDialogShow = true;
      this.addForm = {
        // orzName: "",
        // orzOrder: "",
        // orzParentId: 0,
        groupName: "",
        meterIds: []
      };
    },
    //添加
    addFn() {
      let loading = this.$loading({
        target: document.querySelector(".addDialog .el-dialog"),
        lock: true,
        text: "添加中..."
      });
      addGroupApi(this.addForm)
        .then(res => {
          if (res.code == 200) {
            this.addDialogShow = false;
            loading.close();
            this.getGroup();
            this.$message.success("添加成功!");
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 删除
    delFn(e) {
      console.log("删除的数据信息", e);
      this.$confirm(
        `此操作将永久删除该区域及其子区域以及解除相关联的设备, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(res => {
          let loading = this.$loading({
            lock: true,
            text: "删除中..."
          });
          console.log("删除的数据信息", e);
          delGroupApi(e.groupId)
            .then(res => {
              if (res.code == 200) {
                loading.close();
                this.getGroup();
              }
            })
            .catch(err => {
              loading.close();
            });
        })
        .catch(err => {
          this.$message.info("已取消删除!");
        });
    },
    //打开编辑
    openEdit(e) {
      console.log('编辑数据',e)
      this.editId = e.groupId;
      getOneGroupApi(e.groupId).then(res => {
        if (res.code == 200) {
          this.editForm = res.data;
          this.editDialogShow = true;
        }
      });
    },
    // 编辑
    editFn() {
      let loading = this.$loading({
        target: document.querySelector(".editDialog .el-dialog"),
        lock: true,
        text: "修改中..."
      });
      editGroupApi(this.editId, this.editForm)
        .then(res => {
          if (res.code == 200) {
            loading.close();
            this.editDialogShow = false;
            this.getGroup();
            this.$message.success("修改成功!");
          }
        })
        .catch(err => {
          loading.close();
        });
    },
    // 打开子区域
    // openAddOne(e) {
    //   this.addOneDialogShow = true;
    //   this.addOneForm = {
    //     orzName: "",
    //     orzOrder: "",
    //     orzParentId: e.orzId,
    //   };
    // },
    //添加子区域
    // addOneFn() {
    //   let loading = this.$loading({
    //     target: document.querySelector(".addOneDialog .el-dialog"),
    //     lock: true,
    //     text: "添加中..."
    //   });
    //   addOrzApi(this.addOneForm)
    //     .then(res => {
    //       if (res.code == 200) {
    //         this.addOneDialogShow = false;
    //         loading.close();
    //         this.getOrz();
    //         this.$message.success("添加成功!");
    //       }
    //     })
    //     .catch(() => {
    //       loading.close();
    //     });
    // },
    // 获取可关联设备
    getOrzMeter(e) {
      console.log('获取可关联设备',e);
      
      this.loading1 = true;
      getCanGroupApi(e).then(res => {
        console.log('res555',res)
        if (res.code == 200) {
          this.total = res.data.length;
          this.loading1 = false;
          if (res.data.length !== 0) {
            this.contactData = res.data;
          } else {
            this.contactData = [];
          }
        }
      });
    },
    // 电表分页
    handleSizeChange(val) {
      this.getOrzMeter(this.editId, this.pageNum, val);
      this.pageSize = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    handleCurrentChange(val) {
      this.getOrzMeter(this.editId, val, this.pageSize);
      this.pageNum = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 打开关联设备
    openContact(e) {
      console.log('关联当前分组信心',e)
this.editForm.groupName=e.groupName
      this.editId = e.groupId;
      this.contactDialogShow = true;
      this.pageNum = 1;
      this.pageSize = 10;
      this.getOrzMeter(e.groupId);
    },
    handleSelectionChange(e) {
      this.num = e.length;
      this.deviceIds = [];
      e.forEach(item => {
        this.deviceIds.push(item.meterId);
      });
    },
    // 关联
    contactFn() {
      let loading = this.$loading({
        target: document.querySelector(".contactDialog .el-dialog"),
        lock: true,
        text: "关联中..."
      });
      let arr = {
        meterIds: this.deviceIds,
        groupName:this.editForm.groupName
      };
      editGroupApi(this.editId,arr)
        .then(res => {
          if (res.code == 200) {
            this.$message.success("关联成功");
            this.contactDialogShow = false;
            loading.close();
            this.getGroup();
          }
        })
        .catch(() => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss">
.orz {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  .el-card {
    height: 90%;
    /deep/ .el-table {
      height: 100%;
    }
  }
  .el-card__header {
    .clearfix {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .clearfix::after {
      content: none;
    }
  }
  .el-card__body {
    height: 80%;
  }
}
</style>
